<template>
	<view class="content">
		<view class="poster-box y-f">
			<!-- <image :src="poster.finalPath" mode="widthFix" class="posterImage"></image> -->
			<image :src='imageUrl+"/distribute/CreatePoster?uid="+uid+"&pid="+pid+"&storeid="+storeid+"&name="+userName+"&productname="+productName+"&picture="+showImg+"&url="+url' mode="widthFix" class="posterImage" @click="jump()"></image>
			<!-- <view class="share-box">
				<view class="share-list-box x-f"> -->
					<!-- ifdef MP-WEIXIN -->
					<!-- <button class="share-item share-btn y-f" open-type="share">
						<image class="share-img" src="http://shopro.7wpp.com/imgs/share_wx.png" mode=""></image>
						<text class="share-title">微信好友</text>
					</button> -->
					<!--  endif -->
					<!-- ifndef MP-WEIXIN || H5 -->
					<!-- <view class="share-item y-f" @tap="share">
						<image class="share-img" src="http://shopro.7wpp.com/imgs/share_wx.png" mode=""></image>
						<text class="share-title">微信好友</text>
					</view>
					<!- - #endif -->
					<!-- <view class="share-item y-f" @tap="saveImage">
						<image class="share-img" src="http://shopro.7wpp.com/imgs/save_img.png" mode=""></image>
						<text class="share-title">保存图片</text>
					</view>
					<view class="share-item y-f" @tap="copyLink">
						<image class="share-img" src="http://shopro.7wpp.com/imgs/share_link.png" mode=""></image>
						<text class="share-title">复制链接</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import _app from '@/common/utils/QS-SharePoster/app.js';
import { getSharePoster } from '@/common/utils/QS-SharePoster/QS-SharePoster.js';
import { BASE_URL } from '@/env.js';
import shoproShare from '@/common/mixins/shopro-share';
// #ifdef H5
import wxsdk from '@/common/wechat/sdk';
// #endif
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	mixins: ['shoproShare'],
	data() {
		return {
			poster: {},
			canvasId: 'goods_poster',
			scene: '',
			goodsInfo: {},
			pid:"",
			uid:"",
			storeid:"",
			userName:"",
			showImg:"",
			productName:"",
			url:encodeURIComponent(window.location.origin),
			imageUrl:this.$config.API_URL,
			userInfo:{}
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			shareData: state => state.init.initData.share
		})
	},
	props: {
		goodsId: 0
	},
	async created() {
		this.userInfo=JSON.parse(uni.getStorageSync("userInfo"));
		
		let that = this;
		let goodsInfo = that.getGoodsDetail().then(res => {
			that.pid=that.$Route.query.id;
			that.uid=that.userInfo.StoreUserInfo.Uid;
			that.storeid=that.userInfo.StoreUserInfo.StoreId;				
			that.userName=that.userInfo.StoreUserInfo.NickName;
			that.productName=that.goodsInfo.ProductInfo.Name;
			that.showImg=that.$config.CDN_BASE;
		});
	},
	methods: {
		// 商品详情
		getGoodsDetail() {
			let that = this;
			uni.showLoading({
				title: '加载数据中'
			});
			return new Promise((resolve, reject) => {
				uni.request({
				    url: this.$config.API_Gateway,
					method:"POST",
					data:{
						"method": "API.Store.Product.FullDetails",
						"ver": "1.0",
						"timestamp": parseInt(Date.parse(new Date()) / 1000 + 8 * 60 * 60).toString(),
						"format": "",
						"access_token": "",
						"session_token": "",
						"pid":that.$Route.query.id
					},
					success: (result) => {
						uni.hideLoading();
						let res=(result.data);
						that.goodsInfo = res;
						resolve(that.goodsInfo);
				    }
				});
				
			})
		},
		// 分享
		share() {
			let that = this;
			// #ifdef APP-PLUS
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				href: that.shareInfo.path,
				title: that.shareInfo.title,
				summary: that.shareInfo.title,
				imageUrl: that.shareInfo.imageUrl,
				success: res => {
					console.log('success:' + JSON.stringify(res));
				},
				fail: err => {
					console.log('fail:' + JSON.stringify(err));
				}
			});
			// #endif
			// #ifdef H5
			wxsdk.share(
				{
					title: that.shareInfo.title,
					path: that.shareInfo.path,
					imageUrl: that.shareInfo.imageUrl
				},
				res => {
					that.$tools.toast('分享成功');
				}
			);
			// #endif
		},
		copyLink() {
			let that = this;
			uni.setClipboardData({
				data: that.shareInfo.copyLink,
				success: () => {
					//#ifdef H5
					that.$tools.toast('已复制到剪切板');
					//#endif
				}
			});
		},
		saveImage(){
			let that = this;
			let url=this.imageUrl+"/distribute/CreatePoster?uid="+this.uid+"&pid="+this.pid+"&storeid="+this.storeid+"&name="+this.userName+"&productname="+this.productName+"&picture="+this.showImg+"&url="+this.url;
			uni.downloadFile({
				url: this.imageUrl+"/distribute/CreatePoster?uid="+this.uid+"&pid="+this.pid+"&storeid="+this.storeid+"&name="+this.userName+"&productname="+this.productName+"&picture="+this.showImg+"&url="+this.url,
			    success: (res) => {
			        if (res.statusCode === 200) {
						
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							// filePath:url,
							success: function () {
								
								that.$tools.toast('图片下载成功');
								console.log('save success');
							}
						});
						
			        }
			    }
			})
			
			
		},
		jump() {
			window.location.href= decodeURIComponent(this.url)+"/#/pages/goods/detail/index?id=" + this.pid+"&puid="+this.uid;
		},
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}

.content {
	position: relative;
	width: 100%;
	height: 100%;

	.bg_img {
		width: 100%;
		height: 100%;
	}

	.poster-box {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 50rpx;

		.posterImage {
			width: 680rpx;
			box-shadow: 0px 9rpx 26rpx 6rpx rgba(190, 190, 190, 0.31);
			border-radius: 35rpx;
			overflow: hidden;
		}
	}
}

.hideCanvasView {
	position: relative;
}

.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}

.share-box {
	background: #fff;
	width: 750rpx;
	border-radius: 30rpx 30rpx 0 0;
	padding-top: 30rpx;
	position: relative;
	margin-top: 40rpx;

	.share-foot {
		font-size: 24rpx;
		color: #bfbfbf;
		height: 80rpx;
		border-top: 1rpx solid #eee;
	}

	.share-list-box {
		.share-btn {
			background: none;
			border: none;
			line-height: 1;
			padding: 0;
			&::after {
				border: none;
			}
		}
		.share-item {
			flex: 1;
			padding-bottom: 20rpx;

			.share-img {
				width: 70rpx;
				height: 70rpx;
				background: rgba(246, 246, 254, 1);
				border-radius: 50%;
				margin-bottom: 20rpx;
			}

			.share-title {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
</style>
